@import "../../../assets/sass/variables";
@import "../../../assets/sass/mixin";

free-accordion-group {
  flex: 1 0 auto;

  free-accordion {
    &:first-child .accordion-toggle {
      border-top: none;
    }
  }
}

.free-accordion-group {
  border: 1px solid rgba(120, 130, 140, 0.13);
  .accordion-item {
    background: #fff;

    &.free-accordion-disabled {
      .accordion-toggle {
        cursor: not-allowed;
        &:hover {
          color: #737373;
          text-decoration: none;
        }
      }
    }

    &.free-accordion-open {
      .accordion-content {
        overflow: visible;
      }
    }
  }

  .accordion-toggle {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 2rem;
    padding: .25rem .75rem;
    color: #737373;
    cursor: pointer;
    border-top: 1px solid rgba(120, 130, 140, 0.13);
    user-select: none;

    &.accordion-item-expand {
      font-weight: 600;
      color: #262626;

      + .accordion-content  {
        background: rgba(0, 0, 0, 0.07);
        border-top: 1px solid rgba(120, 130, 140, 0.13);
      }
    }

    &:hover {
      color: #262626;
      text-decoration: none;
    }

    &:after {
      font: normal normal normal .8rem/1 FontAwesome;
      content: "\f105";
      position: absolute;
      top: 50%;
      right: 5px;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      transform: translate(0, -50%);
      transition: all .2s linear;
    }

    &.accordion-item-expand:after {
      transform: translate(0, -50%) rotate(90deg);
    }

    .accordion-toggle-title {
      transition: all .2s linear;
    }
  }

  .accordion-toggle-inner {
    @include flexbox;
    align-items: center;
  }

  .accordion-content {
    position: relative;
    overflow: hidden;
    font-size: .7rem;

    .accordion-inner,
    & > div {
      padding: .5rem;
    }
  }
}


